<!--
  - Copyright (c) 2018-2025, chris All rights reserved.
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: haokang (haokang207@126.com)
  - Date: 2018/10/08 13:56
  - 在线用户
  -->
<template>
  <div class="app-container calendar-list-container">
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit
              highlight-current-row style="width: 99%" size="small">
      <el-table-column align="center" label="编号">
        <template slot-scope="scope">
          <span>{{scope.row.accessToken}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="剩余时间">
        <template slot-scope="scope">
          <span>{{scope.row.remainingSeconds}}秒</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号">
        <template slot-scope="scope">
          <span>{{scope.row.tel}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          <span>{{scope.row.user.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邮箱">
        <template slot-scope="scope">
          <span>{{scope.row.user.email}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.user.createDate | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200" v-if="onlineUser_del">
        <template slot-scope="scope">
          <el-button v-if="onlineUser_del" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,30,50,100]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {fetchList, getObj, addObj, delObj, putObj} from '@/api/onlineUser'
  import waves from "@/directive/waves/index.js"; // 水波纹指令
  import {mapGetters} from 'vuex'

  export default {
    name: 'onlineUser',
    directives: {
      waves
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        statusOptions: [true, false, 0, 1],
        methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10
        },
        labelPosition: 'right',
        onlineUser_del: false
      }
    },
    created() {
      this.getList()
      this.onlineUser_del = this.permissions['onlineUser_del']
    },
    computed: {
      ...mapGetters([
        'elements',
        'permissions'
      ])
    },
    methods: {
      getList() {
        this.listLoading = true;
        fetchList(this.listQuery).then(response => {
          this.list = response.data.data.content;
          this.total = response.data.data.totalElements;
          this.listLoading = false;
        })
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleDelete(row) {
        delObj(row.accessToken).then(() => {
          this.getList();
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

